<template>
  <view>
    <!-- 自定义导航栏 -->
    <view class="navBarBox">
      <!-- 状态栏占位 -->
      <view :style="{ paddingTop: statusBarHeight + 'px' }"></view>
      <!-- 真正的导航栏内容 -->
      <view class="navBar">
        <view class="grzx">应急救援</view>
      </view>
    </view>
    <view class="main">
      <view class="top-map">
        <map id="myMap" :latitude="latitude" :longitude="longitude" :scale="scale"></map>
      </view>
      <view class="bot-inp">
        <!-- 选项卡 -->
        <view class="tabs">
          <text :class="['tab', activeTab === 0 ? 'active' : '']" @click="switchTab(0)">搭电</text>
          <text :class="['tab', activeTab === 1 ? 'active' : '']" @click="switchTab(1)">换胎</text>
          <text :class="['tab', activeTab === 2 ? 'active' : '']" @click="switchTab(2)">拖车</text>
        </view>
        <view class="inp-item" v-if="activeTab !== 2">
          <view class="item-left">位置</view>
          <input class="item-right" v-model="FormData.place" type="text" placeholder="请输入您的位置" placeholder-class="ph-font" />
        </view>
        <view class="inp-item" v-if="activeTab === 2">
          <view class="item-left">起点</view>
          <input class="item-right" v-model="FormData.startPlace" type="text" placeholder="请输入您的位置" placeholder-class="ph-font" />
        </view>
        <view class="inp-item" v-if="activeTab === 2">
          <view class="item-left">终点</view>
          <input class="item-right" v-model="FormData.endPlace" type="text" placeholder="请输入您的位置" placeholder-class="ph-font" />
        </view>
        <view class="inp-item">
          <view class="item-left">求助人</view>
          <input class="item-right" v-model="FormData.carOwner" type="text" placeholder="请输入您的姓名" placeholder-class="ph-font" />
        </view>
        <view class="inp-item">
          <view class="item-left">联系方式</view>
          <input class="item-right" v-model="FormData.carPhone" type="text" placeholder="请输入您的手机号" placeholder-class="ph-font" />
        </view>
        <view class="inp-item">
          <view class="item-left">车牌</view>
          <input class="item-right" v-model="FormData.carNum" type="text" placeholder="请输入您的车牌号" placeholder-class="ph-font" />
        </view>
        <view class="inp-item">
          <view class="item-left">描述</view>
          <textarea class="item-right-big" v-model="FormData.describe" placeholder="请准确描述当前状况及所需的帮助" placeholder-class="ph-font"></textarea>
        </view>
        <view class="hjjy">
          呼叫救援
        </view>
        <navigator class="jyjl" url="/packageMy/rescueRecord/rescueRecord">
          <text>救援记录</text>
          <image src="/static/收起箭头小@2x.png" mode=""></image>
        </navigator>
      </view>
      <view class="bot-menu">
        <view class="menu-top">
          警务救助
        </view>
        <view class="menu-bot">
          <view class="menu-item">
            <image src="/static/交通事故 拷贝@2x.png" mode=""></image>
            <text class="item-font">交通事故</text>
            <text>122</text>
          </view>
          <view class="menu-item">
            <image src="/static/火警@2x.png" mode=""></image>
            <text class="item-font">火警</text>
            <text>119</text>
          </view>
          <view class="menu-item">
            <image src="/static/急救包@2x.png" mode=""></image>
            <text class="item-font">急救中心</text>
            <text>120</text>
          </view>
          <view class="menu-item">
            <image src="/static/警察,公安@2x.png" mode=""></image>
            <text class="item-font">公安报警</text>
            <text>110</text>
          </view>
        </view>
      </view>
    </view>
    <MagicNavigationBar
      :items="items"
      :digHolePosition="1"
      :selectedColor="selectedColor"
      :color="color"
      @onTabSelect="onTabSelect"
      :current="currentTab"
      :background-color="backgroundColor"
      :screenBackgroundColor="screenBackgroundColor"
      :indicatorPadding="indicatorPadding"
      :indicatorSize="indicatorSize"
      :indicatorBackground="indicatorBackground"
    >
      <!-- 圆形指示器的内容有插槽实现 -->
      <template #indicatorContent>
        <view style="display: flex; justify-content: center; width: 100%; height: 100%;">
          <image @click="goEmergency" :src="img" style="width: 30px; height: 30px; align-self: center;"></image>
        </view>
      </template>
    </MagicNavigationBar>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import MagicNavigationBar from '@/uni_modules/jorbin-DigHoleNavigationBar/components/jorbin-DigHoleNavigationBar/jorbin-DigHoleNavigationBar.vue'

// 使用 ES 模块导入图片资源
import warningImg from '@/static/warning.png'
import indexLine from '@/static/index_line.png'
import indexIcon from '@/static/index.png'
import myLine from '@/static/my_line.png'
import myIcon from '@/static/my.png'

// 定义响应式数据
const activeTab = ref(0)
const FormData = reactive({
  startPlace: "", // 起点
  endPlace: "",   // 终点
  place: "",      // 位置
  carNum: "",     // 车牌
  carOwner: "",   // 求助人
  carPhone: "",   // 联系方式
  describe: ""    // 描述
})

// 引入SDK核心类，js文件根据自己业务，位置可自行放置
	var QQMapWX = require('../../static/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
const latitude = ref('')      // 示例纬度
const longitude = ref('')    // 示例经度
const scale = ref(15)             // 地图缩放级别
const statusBarHeight = ref(0)    // 状态栏高度
const navBarHeight = ref(82 + 11)   // 导航栏高度

const img = ref(warningImg)
const selectedColor = ref('#2979ff')
const color = ref('#666666')
const currentTab = ref(1)
const backgroundColor = ref('#ffffff')
const screenBackgroundColor = ref('#f5f5f5')
const indicatorPadding = ref(8)
const indicatorSize = ref(75)
const indicatorBackground = ref('#ff0000')

// 导航栏数据
const items = ref([
  {
    icon: {
      src: indexLine,
      width: 30,
      height: 30
    },
    text: '首页',
    selectedIcon: {
      src: indexIcon
    },
    url: '/pages/index/index'
  },
  {
    type: 'indicator',
    text: '上传',
    url: '/pages/emergencyRescue/emergencyRescue'
  },
  {
    icon: {
      src: myLine,
      width: 30,
      height: 30
    },
    text: '我的',
    selectedIcon: {
      src: myIcon
    },
    url: '/pages/my/my'
  }
])

// 方法定义
const onTabSelect = (index, item) => {
  console.log(item.url)
  console.log(index)
  uni.redirectTo({
    url: item.url
  })
}

const goEmergency = () => {
  uni.redirectTo({
    url: "/pages/emergencyRescue/emergencyRescue"
  })
}

const switchTab = (tab) => {
  activeTab.value = tab
}

function getLocation() {
  // 使用腾讯地图 IP 定位接口
  uni.request({
    url: 'https://apis.map.qq.com/ws/location/v1/ip',
    data: {
      key: 'GZ3BZ-GIY67-NPZXM-H463Z-Q7NAE-UUFCU'
    },
    success: (res) => {
      if (res.data.status === 0) {
        const lat = res.data.result.location.lat
        const lng = res.data.result.location.lng
		getAddress(lat, lng)
        latitude.value = lat
        longitude.value = lng
        uni.setStorage({
          key: 'latitude',
          data: latitude.value
        })
        uni.setStorage({
          key: 'longitude',
          data: longitude.value
        })
        searchNearbyGasStations(lat, lng)
        
      } else {
        console.error('定位失败:', res.data.message)
      }
    },
    fail: (err) => {
      console.error('请求失败:', err)
    }
  })
}

function getAddress(latitude, longitude) {
  uni.request({
    url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=3WWBZ-P7I6Q-Q6C5V-2NNUZ-WYXYE-QABW6`,
    success: (res) => {
      if (res.data.status === 0) {
        const result = res.data.result
        locationCity.value = result.address
        locationCitypro.value = result.address_component.province
      }
    },
    complete: () => {
      uni.hideLoading()
    }
  })
}


// 页面生命周期：onLoad 钩子（uni‑app 页面钩子）
onLoad(() => {
  const app = getApp()
  if (app.globalData.userInfo == null) {
    uni.navigateTo({
      url: "/packageMy/login/login"
    })
  }
})

// 页面挂载后获取状态栏高度
onMounted(() => {
  const sysInfo = uni.getSystemInfoSync()
  statusBarHeight.value = sysInfo.statusBarHeight
  qqmapsdk = new QQMapWX({
    key: 'GZ3BZ-GIY67-NPZXM-H463Z-Q7NAE-UUFCU'
  })
  getLocation()
})
</script>

<style scoped>
.navBarBox {
  /* background-image: url("https://mly-demo.oss-cn-beijing.aliyuncs.com/dhlbj.png"); */
 
  color: #000000;
  height: 200rpx;
  background-color: #fff;
}

.navBar {
  display: flex;
  justify-content: space-between;
  padding: 3rpx 20rpx;
  padding-bottom: 8rpx;
}

.navBarBox .navBar .grzx {
  margin: 20rpx 0 40rpx;
  font-size: 36rpx;
  position: absolute;
  right: 310rpx;
}

.main {
  padding: 0 30rpx;
  /* position: relative; */
  bottom: 260rpx;
}

.top-map {
  width: 690rpx;
  height: 480rpx;
  padding-top: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
}

#myMap {
  margin: 0 auto;
  height: 450rpx;
  width: 640rpx;
  border-radius: 20rpx;
}

.bot-inp {
  background-color: #fff;
  margin-top: 30rpx;
  padding: 30rpx;
  border-radius: 20rpx;
}

.inp-item {
  display: flex;
  margin-bottom: 30rpx;
  font-size: 26rpx;
}

.item-left {
  margin-top: 5rpx;
  background-color: #3789FF;
  width: 150rpx;
  color: #fff;
  height: 66rpx;
  line-height: 66rpx;
  text-align: center;
  border-radius: 33rpx;
  margin-right: 20rpx;
}

.item-right {
  width: 420rpx;
  border: 2rpx solid #E8E8E8;
  height: 66rpx;
  line-height: 66rpx;
  border-radius: 33rpx;
  padding-left: 30rpx;
}

.item-right-big {
  width: 420rpx;
  border: 2rpx solid #E8E8E8;
  height: 200rpx;
  border-radius: 33rpx;
  padding: 20rpx 30rpx;
}

.ph-font {
  color: ##D9D9D9;
  font-size: 24rpx;
}

.hjjy {
  background-color: #FF7237;
  width: 500rpx;
  margin: 20rpx auto;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  color: #fff;
  text-align: center;
}

.jyjl {
  display: flex;
  align-items: center;
  justify-content: center;
}

.jyjl image {
  width: 15rpx;
  height: 20rpx;
  margin-left: 10rpx;
}

.jyjl text {
  font-size: 24rpx;
}

.bot-menu {
  border-radius: 20rpx;
  margin-top: 30rpx;
  padding: 30rpx;
  background-color: #fff;
  height: 500rpx;
}

.menu-top {
  font-size: 34rpx;
  margin-bottom: 30rpx;
}

.menu-bot {
  display: flex;
  justify-content: space-between;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu-item image {
  width: 60rpx;
  height: 60rpx;
}

.item-font {
  margin: 10rpx 0;
}

.tabs {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 20rpx;
}

.tab {
  width: 100rpx;
  text-align: center;
  font-size: 16px;
  padding: 10rpx 0;
}

.tab.active {
  font-weight: bold;
  border-bottom: 4rpx solid #0D66E8;
}
</style>
